<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    request.setAttribute("basePath", basePath);
%>
<%@ include file="/resources/js/easyui/taglibs.jsp" %>
<%@ include file="/resources/js/wechat/_wechatui.jsp" %>
<%@ include file="/resources/js/easyui/_viewJS.jsp" %>
<!DOCTYPE>
<html>
<head>
    <title>注册</title>
    <script src="${basePath}resources/js/Jquery-md5.js"></script>
</head>
<body>
<div class="loading"></div>
<!-- header -->
<%--<header class='login_header'>
    <a href="javascript:history.go(-1);" class="top_fh">微信</a>
</header>--%>
<!-- header end -->

<div class="page login_page">
    <div class="login_inner">
        <div class="zh_title"><em class="zc_tile">注册帐号</em></div>
        <!-- 错误提示 -->
        <div class="loginPoint"></div>
        <form id="myForm" name="myForm">
            <div class="lgin_form zhuce_one">
                <div class='lg_zh'><input name="username" type="text" autofocus placeholder="请输入用户名"></div>
                <div class='lg_sr'><input name="mobile" type="text" placeholder="请输入手机号"></div>
                <%--
                                <div class='lg_sr' style="background-image: url(../resources/images/wechat/ic_shouji.png);"><input name="mobile" type="text" placeholder="请输入手机号"></div>
                --%>

                <%--<div class='lg_sr'><input name="email" type="text" placeholder="请输入邮箱"></div> --%>
                <div class='lg_yzm'><input id="code" type="text" class="zhuceyzm" placeholder="请输入验证码"><img
                        id="captchaImage" onclick="chageCode()" src="${basePath}authCode" alt=""></div>
                <div class='lg_sjyzm'><input id="mobilecode" type="text" placeholder="请输入验证码"><a href="JavaScript:;"
                                                                                                 class="hqzma"
                                                                                                 id="getMoblieCode">获取验证码</a>
                </div>
                <div class="lg_button"><input class="zhuceNext" type="button" value="下一步" style="font-size:1rem;"></div>
            </div>
            <div class="lgin_form zhuce_two">
                <div class='lg_ps'><input id="password" type="password" placeholder="请设置密码"></div>
                <input type="hidden" id="registerpassword" name="password">

                <div class='lg_qrmm'><input id="confirmPassword" type="password" placeholder="请确认密码"></div>
                <div class="lg_button"><input type="button" id="register_submit" class="zhucebtn" value="立即注册"></div>
            </div>
        </form>
    </div>
    <div class="footer_bz">游艺云</div>
</div>
</body>

<script>
    var regUser = /^\w{5,20}$/;
    var regPassword = /^\w{6,18}$/;
    var regTel = /^1[34578]\d{9}$/;
    var username = "";
    var moblie = "";
    var code = "";
    var mobilecode = "";
    var password = "";
    var npassword = "";

    function chageCode() {
        $('#captchaImage').attr('src', '${basePath}authCode?abc=' + Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }
    //验证码倒计时
    var setTime = 0;
    function yzsetTime($index) {
        var yzmset = window.setInterval(function () {
            setTime++;
            if (setTime == 60) {
                setTime = 0;
                $($index).removeClass('cur').text('获取验证码');
                getSMScode();
                clearInterval(yzmset);
            } else {
                $($index).text('重新发送（' + (60 - setTime) + 's）');
            }
        }, 1000);
    }
    //获取验证码
    var getSMScode = function () {
        $("#getMoblieCode").click(function () {
            username = $("input[name='username']").val();
            moblie = $("input[name='mobile']").val();
            code = $("#code").val();
            mobilecode = $("#mobilecode").val();

            //if(typeof(moblie) == "undefined" || moblie.length == 0){
            if (!regUser.test(username)) {
                $(".loginPoint").text("请输入用户名");
                //alert('温馨提示:请输入您的手机号码');
                //}else if(typeof(username) == "undefined" || username.length == 0) {
            } else if (!regTel.test(moblie)) {
                $(".loginPoint").text("请输入您的手机号码");
                //alert('温馨提示:请输入您的用户名');
            } else if (typeof(code) == "undefined" || code.length == 0) {
                $(".loginPoint").text("请输入图片验证码");
                //alert('温馨提示:请输入图片中的验证码');
            } else if (regUser.test(username) && regTel.test(moblie) && code != "") {
                /*验证用户名 手机是否已经存在*/
                if(validatorDataOnlien(username)) {
                    $(".loginPoint").text("用户名已注册").css("color","#ab1e1e");
                }else if(validatorDataOnlien(moblie)){
                    $(".loginPoint").text("手机号已注册").css("color","#ab1e1e");
                }else{
                    if (!$(this).hasClass('cur')) {
                        $(this).addClass('cur').text('重新发送（60s）');
                        $(this).unbind("click");
                        yzsetTime($(this));
                    }
                    $.ajax({
                        url: '${basePath}sms/mobileSend',
                        type: 'POST',
                        data: {"mobileNum": moblie, "validCode": code},
                        error: function (response) {
                            ViewHelper.func.ajaxErrorMessage(response);
                        },
                        success: function (ret) {
                            console.log(ret);
                            if (ret.result) {
                                console.log(ret.info);
                                $(".loginPoint").text("短信已发送至您的手机，请查收！").css("color", "#FFF");
                                // alert('温馨提示:' + ret.info);
                            } else {
                                $(".loginPoint").text(ret.info).css("color", "#ab1e1e");
                                // alert('提示:保存失败!');
                            }
                        }
                    });
                }
            }
        });
    }

    $(".page").yanZheng();
    $(".zhuce_two").hide();

    //下一步按钮
    $(".zhuceNext").on("click", function () {
        username = $("input[name='username']").val();
        moblie = $("input[name='mobile']").val();
        code = $("#code").val();
        mobilecode = $("#mobilecode").val();
        if (!regUser.test(username)) {
            $(".loginPoint").text("请输入用户名");
            //alert('温馨提示:请输入您的手机号码');
            //}else if(typeof(username) == "undefined" || username.length == 0) {
        } else if (!regTel.test(moblie)) {
            $(".loginPoint").text("请输入您的手机号码");
            //alert('温馨提示:请输入您的用户名');
        } else if (typeof(code) == "undefined" || code.length == 0) {
            $(".loginPoint").text("请输入图片验证码");
        } else if (typeof(mobilecode) == "undefined" || mobilecode.length == 0) {
            $(".loginPoint").text("请输入短信验证码");
        } else if (regUser.test(username) && regTel.test(moblie) && code != "" && mobilecode != "") {

            /*验证用户名 手机是否已经存在*/

            /* 验证手机号码、用户名或邮箱是否存在 */
            if(validatorDataOnlien(username)) {
                $(".loginPoint").text("用户名已经注册").css("color","#ab1e1e");
            }else if(validatorDataOnlien(moblie)){
                $(".loginPoint").text("手机号已经注册").css("color","#ab1e1e");
            }else{
                $.ajax({
                    url: '${basePath}wechat/register/verifyRegisterCode',
                    type: 'GET',
                    data: {"mobile": moblie, "mobilecode": mobilecode},
                    error: function (response) {
                        ViewHelper.func.ajaxWechatErrorMessage(response);
                    },
                    success: function (ret) {
                        if (ret.result) {
                            $(".zhuce_one").slideUp(500);
                            setTimeout("$('.zhuce_two').slideDown(500)", 500);
                            $(".loginPoint").text("").css("color","#ab1e1e");
                        } else {
                            // alert('温馨提醒' + ret.info);
                            $(".loginPoint").text(ret.info);
                        }
                    }
                });
            }

        }
    });

    //提交按钮
    $("#register_submit").click(function () {
        password = $("#password").val();
        npassword = $("#confirmPassword").val();
        if (password == null || password == '') {
            //alert("密码不能为空！");
            $(".loginPoint").text("请输入6-18位数字、字母或下划线组成的密码");
            return;
        }
        if (npassword == null || npassword == '') {
            //alert("密码不能为空！");
            $(".loginPoint").text("确认密码不能为空");
            return;
        }
        if (npassword != password) {
            //alert("两次输入密码不一致！");
            $(".loginPoint").text("两次输入密码不一致");
            return;
        }
        if (regPassword.test(password) && npassword == password) {

            if (typeof(mobilecode) == "undefined" || mobilecode.length <= 0) {
                $(".loginPoint").text('*短信验证码不能为空。');
            } else {

                $("#registerpassword").val(createPassword(password, password));

                $.ajax({
                    url: '${basePath}wechat/register/' + mobilecode + '/submitUserInfo',
                    type: 'POST',
                    data: $("#myForm").serialize(),
                    async: false,
                    traditional: true,
                    error: function (response) {
                        ViewHelper.func.ajaxErrorMessage(response);
                    },
                    success: function (ret) {
                        if (ret.result) {
                            window.location = "${basePath}wechat/income/accounts/mainView";
                        } else {
                            $(".loginPoint").text(ret.info);
                        }
                    }
                });

            }
        }
    });

    /* 验证手机号码、用户名或邮箱是否存在 */
    function validatorDataOnlien(value) {
        var result = true;
        $.ajax({
            url: '${basePath}wechat/register/vaildUserInfo',
            async: false,
            type: 'GET',
            data: {"vaildatorValue": value},
            traditional: true,
            success: function (ret) {
                result = ret.vaildatorResult;
            }
        });
        return result;
    }

    getSMScode();
</script>
</html>